A publisher is an advanced longform text input form element.
Discussion Feeddev ready
Preview
Code
<div class="slds-publisher slds-publisher--discussion">
<dl class="slds-list--horizontal slds-m-bottom--small slds-publisher__toggle-visibility">
<dt class="slds-list__item slds-text-body--small">To: </dt>
<dd class="slds-list__item">My Followers</dd>
</dl>
<label for="comment-text-input2" class="slds-assistive-text">Write a comment</label>
<textarea id="comment-text-input2" class="slds-publisher__input slds-textarea slds-text-longform" placeholder="Write a comment…"></textarea>
<div class="slds-publisher__actions slds-grid slds-grid--align-spread">
<ul class="slds-grid slds-publisher__toggle-visibility">
<li>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
</svg>
<span class="slds-assistive-text">Add User</span>
</button>
</li>
<li>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
</svg>
<span class="slds-assistive-text">Attach a file</span>
</button>
</li>
</ul>
<button class="slds-button slds-button--brand">Share</button>
</div>
</div>The discussion feed publisher is found at the top of a feed stream. It contains basic and advanced publishing capibilities.
The discussion feed is in a collapsed state by default. There are 3 states of the discussion feed that provide different feedback to the user. First, the collapsed state, this indicates the user has not interacted with the discussion feed publisher. When the user initiates an interaction with the publisher, by either focusing of the textara or clicking the "Share" button, through javascript the class of slds-is-active should be applied to the slds-publisher div. This class will expand the publisher box and display additional publisher actions.
During the active state, before the user has begun typing or attaching additional content, the "Share" button should be disabled by applying the disabled attribute to the <textarea>. When the user begins typing, the disabled attribute should be toggled off.
Commentdev ready
Preview
Code
<div class="slds-media slds-comment slds-hint-parent">
<div class="slds-media__figure">
<div class="slds-avatar slds-avatar--circle slds-avatar--small">
<a href="#void" title="Jenna Davis">
<img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
</a>
</div>
</div>
<div class="slds-media__body">
<div class="slds-publisher slds-publisher--comment">
<label for="comment-text-input-01" class="slds-assistive-text">Write a comment</label>
<textarea id="comment-text-input-01" class="slds-publisher__input slds-input--bare slds-text-longform" placeholder="Write a comment…"></textarea>
<div class="slds-publisher__actions slds-grid slds-grid--align-spread">
<ul class="slds-grid">
<li>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
</svg>
<span class="slds-assistive-text">Add User</span>
</button>
</li>
<li>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
</svg>
<span class="slds-assistive-text">Attach a file</span>
</button>
</li>
</ul>
<button class="slds-button slds-button--brand">Comment</button>
</div>
</div>
</div>
</div>The comment publisher is found at the bottom of a discussion feed comment thread. It contains basic publishing capibilities.
The comment publisher is in a collapsed state by default. There are 4 states of the discussion feed that provide different feedback to the user. First, the collapsed state, this indicates the user has not interacted with the comment publisher. When the user initiates an interaction with the publisher, by either focusing of the textara or clicking the "Comment" button, through javascript the class of slds-is-active should be applied to the slds-publisher element. This class will expand the publisher box and display additional publisher actions.
Due to the implementation of the comment publisher design, we used a faux textarea container and we'll need to apply the our focus state to that custom container. Using javascript, the class slds-has-focus should be applied to the slds-publisher element when the user interacts with <textarea>. When the user loses focus on the <textarea>, the class slds-has-focus should be toggled off from the slds-publisher element.
During the active state, before the user has begun typing or attaching additional content, the "Comment" button should be disabled by applying the disabled attribute to the <textarea>. When the user begins typing, the disabled attribute should be toggled off.
Component Overview
To initialize the publisher, apply the .slds-publisher class to a containing <div>. The publisher consists of, but not limited to, a text input form element that is either a plain text or rich text editor. A row of actionable interactions, such as attaching additional content, adding followers and a submit button.
The variants of the publishers have different use cases, so please pay attention to the markup structure of each.
For available classes and options, see the publisher overview legend below.
Usage
| Class Name | Usage | |
|---|---|---|
.slds-publisher | Applied to:
Initializes publisher | Required: Required Comments:-- |
.slds-publisher--discussion | Applied to:
Modifier that alters the interactions of the publisher, specific to the discussion feed publisher | Required: No, optional element or modifier Comments:-- |
.slds-publisher--comment | Applied to:
Modifier that alters the interactions of the publisher, specific to the comment publisher | Required: No, optional element or modifier Comments:-- |
.slds-publisher__input | Applied to:
Abstraction of the text input styles | Required: Required Comments:-- |
.slds-publisher__actions | Applied to:
Bottom row of actionable items | Required: Required Comments:-- |
.slds-attachments | Applied to:
Container for content attachment functionality and aesthetics | Required: Required Comments:Only required if you have content attachment enabled |
.slds-is-active | Applied to:
Opens publisher container to display additional functionality | Required: Required Comments:Added through JavaScript |
.slds-has-focus | Applied to:
Applies focus to comment publisher container when inside | Required: Required Comments:Added through JavaScript |